<script setup lang="ts">
import type { Ref, Text } from "vue";
import { computed, provide } from "vue";
import { ref, inject, onMounted, onUnmounted } from "vue";

import Textarea from "@src/components/ui/inputs/Textarea.vue";
import Button from "@src/components/ui/inputs/Button.vue";
import useStore from "@src/store/store";
import axios, { AxiosRequestConfig, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';


const store = useStore();
const valueName: Ref<string> = ref("");
const valueAvatar: Ref<string> = ref("");
const valueSite: Ref<string> = ref("");
const valueStudyText: Ref<string> = ref("");
const valuePersonality: Ref<string> = ref("");

// search the selected conversation using activeConversationId.
const activeConversation = computed(() => {
//   let activeConversation = store.conversations.find(
//     (conversation) => conversation.id === store.activeConversationId
//   );

//   if (activeConversation) {
//     return activeConversation;
//   } else {
//     return store.archivedConversations.find(
//       (conversation) => conversation.id === store.activeConversationId
//     );
//   }
});

const handleSetDraft = () => {
//   const index = getConversationIndex(activeConversation.id);
//   if (index !== undefined) {
//     store.conversations[index].draftMessage = value.value;
//   }
};

const saveAdmin = () => {
  // TODO
};

</script>

<template>
  <div class="space-y-6">
    <div class="w-full flex scrollbar-hidden">
      <label class="text-sm min-w-[50px]">顾客地址：</label>
      <label class="text-sm font-medium text-gray-900 ">
      https://aivodesk.com/xssdef
      </label>
    </div>
    <div class="w-full flex scrollbar-hidden">
      <label class="text-sm min-w-[50px]">客服地址：</label>
      <label
        class="block text-sm font-medium text-gray-900"
      >
      https://aivodesk.com/xssdef
      </label>
    </div>

    <div class="flex items-center justify-items w-full scrollbar-hidden">
      <label class="min-w-[50px] text-sm">
        AI名称
      </label>
    
      <Textarea
        v-model="valueName"
        :value="valueName"
        @input="handleSetDraft"
        class="max-h-[80px]  pr-[50px] resize-none scrollbar-hidden"
        auto-resize
        cols="30"
        rows="1"
        placeholder="AI名称"
        aria-label="AI名称"
      />
    </div>

    <div class="flex items-center justify-items w-full scrollbar-hidden">
      <label class="text-sm min-w-[50px]">AI头像</label>
      
      <Textarea
        v-model="valueAvatar"
        :value="valueAvatar"
        class="max-h-[80px] pr-[50px] resize-none scrollbar-hidden"
        auto-resize
        cols="30"
        rows="1"
        placeholder="AI头像"
        aria-label="AI头像"
      />
    </div>

    <div class="flex items-center justify-items w-full scrollbar-hidden">
      <label class="text-sm min-w-[80px]">AI学习网站</label>
        
        <Textarea
          v-model="valueSite"
          :value="valueSite"
          class="max-h-[80px] pr-[50px] resize-none scrollbar-hidden"
          auto-resize
          cols="30"
          rows="1"
          placeholder="AI学习网站"
          aria-label="AI学习网站"
        />
      </div>

    <div class="flex items-center justify-items w-full scrollbar-hidden">
      <label class="text-sm min-w-[80px]">AI学习文本</label>
        
      <Textarea
        v-model="valueStudyText"
        :value="valueStudyText"
        class="max-h-[80px] pr-[50px] resize-none scrollbar-hidden"
        auto-resize
        cols="30"
        rows="3"
        placeholder="AI学习文本"
        aria-label="AI学习文本"
      />
    </div>

    <div class="flex items-center justify-items w-full scrollbar-hidden">
      <label class="text-sm min-w-[80px]">AI性格模版</label>
        
      <Textarea
        v-model="valuePersonality"
        :value="valuePersonality"
        class="max-h-[80px] pr-[50px] resize-none scrollbar-hidden"
        auto-resize
        cols="30"
        rows="3"
        placeholder="AI性格模版"
        aria-label="AI性格模版"
      />
    </div>

    <div>
        <button
          type="submit" class="flex min-w-[100px] justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
          @click="saveAdmin"
        >
          保存
        </button>
      </div>
  </div>
  
</template>
